<template>
<div>

	<div class="bbg1">
		<div class="title2">
			<div class="shuxian2"></div>
			<div class="wenzi2">
				事件列表
			</div>
		</div>
	</div>

	<el-row class="bbg1 pl45">
	<el-form :inline="true" :model="form" >

		<el-form-item >

			<el-date-picker
		      v-model="form.start_time"
		      type="date"
		      format="yyyy-MM-dd"
		      value-format="yyyy-MM-dd"
		      placeholder="开始日期"
		      style="width:240px;">
		    </el-date-picker>
		    	<span class="ml10 mr10" style="color:#fff;">至</span>
		    <el-date-picker
		      v-model="form.end_time"
		      type="date"
		      format="yyyy-MM-dd"
		      value-format="yyyy-MM-dd"
		      placeholder="结束日期"
		      style="width:240px;">
		    </el-date-picker>

	    </el-form-item>
	    
		<el-form-item >
		    <el-input v-model="form.id" placeholder="事件编号" style="width:240px;"></el-input>
		</el-form-item>

		<!-- <el-form-item >
			<daterange v-bind:se.sync="s_e" type="daterange"></daterange>
	    </el-form-item> -->

	    <el-form-item >
		    <el-input v-model="form.release_name" placeholder="创建人" style="width:240px;"></el-input>
		</el-form-item>

	    

	    
		<el-form-item >
		    <el-input v-model="form.question_title" placeholder="任务名称" style="width:240px;"></el-input>
		</el-form-item>
		<!-- <el-form-item >
		    <el-input v-model="form.status" placeholder="处理状态"></el-input>
		</el-form-item> -->
		<el-form-item >
		    <el-select v-model="form.status"  placeholder="处理状态" style="width:240px;">
		      <el-option 
		      v-for="item in status_select_label"
		      :label="item.label" :value="item.value"></el-option>
		    </el-select>
		</el-form-item>
		<el-form-item >
		    <!-- <el-input v-model="form.grid_id" placeholder="创建网格id"></el-input> -->
		    <el-cascader 
				style="width:515px;"
				filterable
				:options="treedata"
				:props="props1"
				filterable
				change-on-select
				v-model="selectedOptions">
				</el-cascader>
		</el-form-item>

		<el-form-item>
		    <el-button type="primary" @click="search" 
		    style="width:140px;background:rgba(10,137,145,1);">查 询</el-button>
		</el-form-item>
		<!-- <el-form-item>
		    <el-button type="success" @click="add">创建</el-button>
		</el-form-item> -->
	</el-form>
	</el-row>

	<el-row class="bbg2 pl45">
	<el-table
	    :data="list.results"
	    :header-cell-style="{
			'background-color': '#169098',
		    'color': '#fff',
		}"
	    border
	    height="680"
	    style="background:#083749;"
	    :row-style="{
	    	height : '63px'
	    }"
	    >
	    <el-table-column
	      prop="id"
	      label="事件编号"
	      align="center"
	      width="150"
	      show-overflow-tooltip
	      >
	    </el-table-column>
	    <el-table-column
	      prop="task_type"
	      label="类型"
	      align="center"
	      width="100"
	      >
	      <template slot-scope="scope">
	      	{{task_type_label[parseInt(scope.row.task_type)]}}
	      </template>
	    </el-table-column>
	    <el-table-column
	      prop="question_title"
	      label="任务名称"
	      align="center"
	      show-overflow-tooltip
	      >
	    </el-table-column>
	    <el-table-column
	      prop="grid_names"
	      label="所属网格"
	      align="center"
	      >
	    </el-table-column>
	    <el-table-column
	      prop="release_name"
	      label="创建人"
	      align="center"
	      >
	    </el-table-column>
	    <el-table-column
	      label="处理状态"
	      align="center"
	      width="100"
	      >
	      <template slot-scope="scope">
	      	{{status_label[parseInt(scope.row.status)]}}
	      </template>
	    </el-table-column>
	    <el-table-column
	      prop="handler_grid_name"
	      label="当前处理网格"
	      align="center"
	      >
	    </el-table-column>
	    <el-table-column
	      prop="release_time"
	      label="任务创建时间"
	      align="center"
	      show-overflow-tooltip
	      width="170"
	      >
	    </el-table-column>

	    <el-table-column
	      align="center"
	      width="70"
	      label="操作">
	      	<template slot-scope="scope">
	      		<el-button v-if="scope.row.id" type="success" size="mini" 
	      		icon="el-icon-view" circle
	      		@click="edit(scope.row)">
	      		</el-button>
	      		<!-- <el-button type="danger" size="mini" 
	      		icon="el-icon-delete" circle
	      		@click="del(scope.row)">
	      		</el-button> -->
	      	</template>
	    </el-table-column>
	  </el-table>
	</el-row>

	<el-row class="bbg1 text-center pt30 pb20">
		<el-pagination
		  @size-change="handleSizeChange"
		  @current-change="handleCurrentChange"
		  :current-page="pageNo"
		  :page-size="pageSize"
		  layout="total, sizes, prev, pager, next"
		  :total="list.totalRecord">
		</el-pagination>
	</el-row>



<el-dialog
  :title="current.info.question_title"
  :visible.sync="dialogVisible"
  width="900px">

  	<eventinfo :obj="current"></eventinfo>

	<!-- <el-tabs v-model="activeName2" type="card" >
	    <el-tab-pane label="事件详情" name="first">
	    	<eventinfo :obj="current"></eventinfo>
	    </el-tab-pane>
	    <el-tab-pane label="事件流程" name="second" v-if="current.flow">
	    	<flowinfo :obj="current" ></flowinfo>
	    </el-tab-pane>
	</el-tabs> -->
  
  	<!-- <el-form ref="form" :model="current" label-width="180px">

		<el-form-item label="标题："  >
			<el-input v-model="current.title" style="width:400px;"></el-input>
		</el-form-item>

		<el-form-item label="内容："  >
			<el-input type="textarea" v-model="current.content" style="width:400px;"></el-input>
		</el-form-item>

	</el-form> -->

  <!-- <span slot="footer" class="dialog-footer">
    <el-button @click="dialogVisible = false">取 消</el-button>
    <el-button type="primary" @click="save">保 存</el-button>
  </span> -->
</el-dialog>


</div>
</template>

<script>

import daterange from '@/components/daterange'
import eventinfo from './info_1'
import flowinfo from './flow'

export default {
	
	name : 'eventList',
	
	data () {
		return {
		  	list : {},

		  	form : {
		  		start_time : this.$util.date2str(new Date()),
		  		end_time : this.$util.date2str(new Date()),
		  	},

		  	pageNo : 1,
		  	pageSize : 10,

		  	current : {
		  		info : {},
		  		flow : {},
		  	},

		  	dialogVisible : false,

		  	task_type_label : ['', '紧急任务', '普通', '检查', '日常'],

		  	status_label : ['', '处理中', '已完成'],

		  	s_e : [this.$util.date2str(new Date()), this.$util.date2str(new Date())],

		  	props1 : {
				value : 'id',
				label : 'name',
			},

			treedata : [],

			selectedOptions : [1],

			activeName2 : 'first',

			status_select_label : [
				{label : '全部', value : undefined},
				{label : '处理中', value : '1'},
				{label : '已完成', value : '2'},
			],
		}
	},

	props : {

	},

	components : {
		daterange,
		eventinfo,
		flowinfo,
	},

	computed : {
		
	},

	methods : {
		init () {

			console.log('selectedOptions');
			console.log(this.selectedOptions);

			const day = this.$util.dateDiff(this.form.start_time, this.form.end_time);
			if(day < 0){
                this.$message.warning('开始时间不能在结束时间之后。');
                return;
			}

			this.$http({
				fun : 'eventList',
				//requestType : 'get',
				...this.form,
				start_time : this.form.start_time + ' 00:00:00',
				end_time : this.form.end_time + ' 23:59:59',
				grid_id : this.selectedOptions[this.selectedOptions.length - 1] + '',
				pageNo : this.pageNo,
				pageSize : this.pageSize,
				cb : res => {
					console.log(res);
					this.list = this.$util.tableAdd(res);

				}
			});
		},

		add () {
			this.dialogVisible = true;
			this.current = {};
		},

		edit (item) {
			console.log(item);
			this.$http({
				fun : 'eventInfo',
				id : item.id,
				cb : res => {

					this.$http({
						fun : 'flowList',
						id : item.id,
						cb : res1 => {
							console.log('ffffffff');
							console.log(res);
							console.log(res1);

							// res1.forEach(item => {
							// 	if(item.params == undefined || item.params == ''){
							// 		item['paramsobj'] = {
							// 			content : '',
							// 		};
							// 	}else{
							// 		//item['paramsobj'] = JSON.parse(item.params);
							// 		item['paramsobj'] = item.params;
							// 	}

							// 	// if(item.handle_time == undefined){
							// 	// 	item.handle_time = this.$util.date2str(new Date()) + ' 23:59:59';
							// 	// }
							// })

							//处理图片和视频
							// let imgs = [];
							// let videos = [];

							res1.forEach(item1 => {

								if(item1.params){
									item1['imgs'] = [];
									item1['videos'] = [];
									item1.params.forEach(item => {
										if(item.type == 'img' 
										&& item.value != null
										&& item.value != ''){
											item1['imgs'] = item.value.split(',');
										}
										if(item.type == 'video' 
										&& item.value != null
										&& item.value != ''){
											item1['videos'] = item.value.split(',');
										}
									})
								}
							});


							
							


							this.current = {
								info : {
									...res,
									// imgs : res.question_img ? res.question_img.split(',') : [],
									// videos : res.question_video ? res.question_video.split(',') : [],
								},
								flow : res1,
								
							};
							console.log(this.current);
							this.activeName2 = 'first';
							this.dialogVisible = true;
						}
					});
				}
			});
		},

		del (item) {
			this.$confirm('此操作将永久删除该数据, 是否继续?', '提示', {
	          confirmButtonText: '确定',
	          cancelButtonText: '取消',
	          type: 'warning'
	        }).then(() => {

	        	this.$http({
	        		fun : 'createHelp',
	        		id : item.id,
	        		del_flag : 1,
	        		cb : res => {
						this.$message({
							type: 'success',
							message: '删除成功!'
						});
						this.init();
	        		},
	        		err : res => {
	        			this.$message({
							type: 'error',
							message: '删除失败!'
						});
	        		}
	        	});
	          
	        }).catch(() => {
	                   
	        });
		},

		save () {
			this.$http({
				fun : 'createHelp',
				...this.current,
				cb : res => {
					console.log(res);
					this.$message.success('操作成功');
					this.dialogVisible = false;
					this.init();
				}
			})
		},

		handleSizeChange (val) {
			this.pageSize = val;
			this.init();
		},

		handleCurrentChange (val) {
			this.pageNo = val;
			this.init();
		},

		search () {
			this.pageNo = 1;
			this.init();
		},


	},

	watch : {
	    
	},

	mounted () {
		this.init();

		this.$http({
			fun : 'grideList',
			cb : res => {
				console.log(res);

				const result = this.$util.transData(res, 'id', 'parent_id', 'children');
				console.log(result);
				this.treedata = result;
				this.treedata.unshift({
					name : '全部网格',
					id : 1,
				});

			}
		});
	},

}
</script>

<style scoped>

</style>
